import { SpaceRecordItem } from "../types";
import { Modal } from "antd";
import { pageQuerySpaceHistory } from "../service";
import Table, { ColumnType } from "antd/lib/table";
import { useEffect, useState } from "react";

interface SpaceRecordProps {
    spaceId: string;
    visible: boolean;
    onClose: () => void;
}

interface PaginationConfig {
    page: number;
    pageSize: number;
    total: number;
}

export default (props: SpaceRecordProps) => {
    const { spaceId, visible, onClose } = props;
    const [dataList, setDataList] = useState<SpaceRecordItem[] | undefined>(undefined)
    const [loading, setLoading] = useState<boolean>(false);
    const [pageObject, setPageObject] = useState<PaginationConfig>({
        page: 1,
        pageSize: 10,
        total: 0,
    });

    const columns: ColumnType<SpaceRecordItem>[] = [
        {
            title: '泊位编号',
            dataIndex: 'space_no',
        },
        {
            title: '路段名称',
            dataIndex: 'road_name',
        },
        {
            title: '设备编号',
            dataIndex: 'device_no',
        },
        {
            title: '车牌号',
            dataIndex: 'plate_number',
        },
        {
            title: '识别图片地址',
            dataIndex: 'picture_url',
        },
        {
            title: '泊位状态',
            dataIndex: 'status',
        },
        {
            title: '识别时间',
            dataIndex: 'picture_time',
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
        },
    ];

    const request = async (
        page?: number,
        pageSize?: number,
    ): Promise<any> => {
        let data = await pageQuerySpaceHistory({
            space_id: spaceId,
            page: page || 1,
            pageSize: pageSize || pageObject.pageSize || 10
        })
        if (data.success) {
            setPageObject({ ...pageObject, total: data.total || 0, page: page || 1 });
        } else {
            setPageObject({ ...pageObject, total: 0, page: 1 });
        }
        return data;
    }

    useEffect(() => {
        if (!spaceId) throw new Error('泊位号 不能为空');
        setLoading(true);
        request()
            .then((res) => {
                if (res.success && res.data !== null) {
                    setDataList(res.data);
                    setLoading(false);
                }
            })
            .finally(() => { });
    }, []);


    return (
        <Modal
            title={<div>泊位 &nbsp;历史数据</div>}
            open={visible}
            width={1200}
            footer={null}
            centered
            destroyOnClose
            onOk={() => onClose()}
            onCancel={() => onClose()}
            afterClose={() => onClose()}
        >
            <Table
                columns={columns}
                dataSource={dataList}
                loading={loading}
                style={{ marginTop: '20px' }}
                pagination={{
                    showQuickJumper: false,
                    showSizeChanger: false,
                    ...pageObject,
                    pageSize: 10,
                    onChange: (page, pageSize) => {
                        setPageObject({ ...pageObject, page, pageSize: pageSize || 10 });
                        request(page, pageSize);
                    },
                }}
            />
        </Modal>
    );

}